<template>
  <ul>
    <li
      v-for="todo in todos"
      :key="todo.id"
      class="flex items-center justify-between border-b border-gray-300 py-2"
    >
      <span :class="{ 'line-through': todo.completed }">{{ todo.text }}</span>
      <button
        @click="deleteTodo(todo.id)"
        class="text-red-500"
      >
        删除
      </button>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const props = defineProps<{
  todos: Todo[];
}>();

const emits = defineEmits<{
  (e: 'delete-todo', id: number): void;
}>();

const deleteTodo = (id: number) => {
  emits('delete-todo', id);
};
</script>    